<template>
	<view>
		<view class="uni-padding-wrap">
		    <block v-if="!recording && !playing && !hasRecord">
		        <view class="page-body-time">
		            <text class="time-big">{{formatedRecordTime}}</text>
		        </view>
		        <view class="page-body-buttons">
		            <view class="page-body-button"></view>
		            <view class="page-body-button" @click="startRecord">
						<!-- <view class="iconfont icon-luyin luyin-set"></view> -->
		                <image src="../../static/images/record.png"></image>
		            </view>
		            <view class="page-body-button"></view>
		        </view> 
		    </block>
		    <block v-if="recording === true">
		        <view class="page-body-time">
		            <text class="time-big">{{formatedRecordTime}}</text>
		        </view>
		        <view class="page-body-buttons">
		            <view class="page-body-button"></view>
		            <view class="page-body-button" @click="stopRecord">
		                <view class="button-stop-record"></view>
		            </view>
		            <view class="page-body-button"></view>
		        </view>
		    </block> 
		    <block v-if="hasRecord === true && playing === false">
		       <view class="page-body-time">
		            <text class="time-big">{{formatedPlayTime}}</text>
		            <text class="time-small">{{formatedRecordTime}}</text>
		        </view>
		        <view class="page-body-buttons">
		            <view class="page-body-button" @click="playVoice">
		                <image src="../../static/images/recordPlay.png"></image>
		            </view>
		            <view class="page-body-button" @click="clear">
		                <image src="../../static/images/trash.png"></image>
		            </view>
		        </view>
		    </block>
		    <block v-if="hasRecord === true && playing === true">
		       <view class="page-body-time">
		            <text class="time-big">{{formatedPlayTime}}</text>
		            <text class="time-small">{{formatedRecordTime}}</text>
		        </view>
		        <view class="page-body-buttons">
		            <view class="page-body-button" @click="stopVoice">
		                <image src="../../static/images/stop.png"></image>
		            </view>
		            <view class="page-body-button" @click="clear">
		                <image src="../../static/images/trash.png"></image>
		            </view>
		        </view>
		    </block>
		</view>
		<view class="tap-wrap"> 
			<button class="local-import" @tap="chooseRecorder" :disabled="recording">本地导入</button>
			<button class="submit-voice" @tap="submitVoice">提交</button>
		</view>
	</view>
</template>

<script>
	import {pickFile} from '@/common/pickFile.js' 
	// #ifdef APP-PLUS
	import permision from "@/common/permission.js"
	// #endif
	var util = require('../../common/util.js')
	var playTimeInterval = null; 
	var recordTimeInterval = null;
	var recorderManager = null;
	var music = null;
	export default { 
	    data() {
	        return {
	            recording: false, //录音中
	            playing: false, //播放中
	            hasRecord: false, //是否有了一个
	            tempFilePath: '',
	            recordTime: 0,
	            playTime: 0,
	            formatedRecordTime: '00:00:00', //录音的总时间
	            formatedPlayTime: '00:00:00' //播放录音的当前时间
	        }
	    },
	    onUnload: function() {
	        this.end();
	    },
	    onLoad: function() {
	        music = uni.createInnerAudioContext();
	        music.onEnded(() => {
	            clearInterval(playTimeInterval)
	            var playTime = 0
	            console.log('play voice finished')
	            this.playing = false;
	            this.formatedPlayTime = util.formatTime(playTime);
	            this.playTime = playTime;
	        });
	        recorderManager = uni.getRecorderManager();
	        recorderManager.onStart(() => {
	            console.log('recorder start');
	
	            this.recording = true;
	            recordTimeInterval = setInterval(() => {
	                this.recordTime += 1;
	                this.formatedRecordTime = util.formatTime(this.recordTime);
	            }, 1000)
	        });
	        recorderManager.onStop((res) => {
	            console.log('on stop');
	            music.src = res.tempFilePath;
	
	            this.hasRecord = true;
	            this.recording = false;
	        });
	        recorderManager.onError(() => {
	            console.log('recorder onError');
	        });
	    },
	    methods: {
			submitVoice(){
				console.log("提交导入音频");
			},
			//本地导入音频
			chooseRecorder(){ 
				pickFile.PickFile((audioSrc) => {   
				     console.log(audioSrc) ;
						 music.src = 'file://' + audioSrc;
						 this.hasRecord = true;
						 this.recording = false; 
						 this.playing = false;
						 //music.duration放在setTimeout里面获取的才正确
						 setTimeout(()=>{
							this.recordTime = Math.floor(music.duration);
							console.log(this.recordTime+"recordTime");
							this.formatedRecordTime = util.formatTime(this.recordTime);
						 },50);
					 // }
				    // 这里就会得到 你选择的文件路径。拿到路径后，你可以用uni.uploadFile  进行上传。  
				}, 'audio/*');  
				//这里第一个参数是 回调函数，第二个是你要选择的文件类 "image/*"，"audio/*"，"video/*;image/*"
			},
	        async startRecord() { //开始录音
	            // #ifdef APP-PLUS
	            let status = await this.checkPermission();
	            if (status !== 1) {
	                return;
	            }
	            // #endif
	
	            // TODO ios 在没有请求过权限之前无法得知是否有相关权限，这种状态下需要直接调用录音，但没有状态或回调判断用户拒绝
	            recorderManager.start({
	                format: 'mp3'
	            });
	        },
	        stopRecord() { //停止录音
	            recorderManager.stop();
	            clearInterval(recordTimeInterval);
	        },
	        playVoice() {
	            console.log('play voice');
	            this.playing = true;
	            playTimeInterval = setInterval(() => {
	                this.playTime += 1;
	                this.formatedPlayTime = util.formatTime(this.playTime);
	            }, 1000)
	            music.play();
				
				// console.log(music.duration+"sad")
	        },
	        stopVoice() {
	            clearInterval(playTimeInterval)
	            this.playing = false;
	            this.formatedPlayTime = util.formatTime(0);
	            this.playTime = 0;
	            music.stop();
	        },
	        end() {
	            music.stop();
	            recorderManager.stop();
	            clearInterval(recordTimeInterval)
	            clearInterval(playTimeInterval);
	            this.recording = false, this.playing = false, this.hasRecord = false;
	            this.playTime = 0, this.recordTime = 0;
				this.tempFilePath='';
	            this.formatedRecordTime = "00:00:00", this.formatedRecordTime = "00:00:00";
	        },
	        clear() {
	            this.end();
	        }
	        // #ifdef APP-PLUS
	        ,
	        async checkPermission() {
	            let status = permision.isIOS ? await permision.requestIOS('record') :
	                await permision.requestAndroid('android.permission.RECORD_AUDIO');
	
	            if (status === null || status === 1) {
	                status = 1;
	            } else if (status === 2) {
	                uni.showModal({
	                    content: "系统麦克风已关闭",
	                    confirmText: "确定",
	                    showCancel: false,
	                    success: function(res) {
	                    }
	                })
	            } else {
	                uni.showModal({
	                    content: "需要麦克风权限",
	                    confirmText: "设置",
	                    success: function(res) {
	                        if (res.confirm) {
	                            permision.gotoAppSetting();
	                        }
	                    } 
	                })
	            }
	            return status;
	        }
	        // #endif
	    }
	}
</script>

<style>
	page{
		background-color: #EEEEEE;
	}
  image {
        width: 150upx;
        height: 150upx;
    }

    .page-body-wrapper {
        justify-content: space-between;
        flex-grow: 1;
        margin-bottom: 300upx;
    }

    .page-body-time {
		margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .time-big {
        font-size: 60upx;
        margin: 20upx;
    }

    .time-small {
        font-size: 30upx;
    }

    .page-body-buttons {
        margin-top: 60upx;
        display: flex;
        justify-content: space-around;
    }

    .page-body-button {
        width: 250upx;
        text-align: center;
    }

    .button-stop-record {
        width: 110upx;
        height: 110upx;
        border: 20upx solid #fff;
        background-color: #f55c23;
        border-radius: 130upx;
        margin: 0 auto;
    }
	
	.luyin-set {
		font-size: 100px;
		color: #FF8920;
	}
	.tap-wrap {
		margin-top: 30px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.local-import{
		color: #FF8920;
		text-align: center;
		font-size: 16px;
	}
	.submit-voice{
		margin-top: 50px;
		width: 15px;
		width: 150px;
		padding: 5px 0;
		background-color: #FFC107;
		font-size: 16px;
		color: #FFFFFF;
		border-radius: 10px;
		text-align: center;
	}
</style>
